<template>
    <div id="distpicker">
        <!-- yours conents -->
		<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </div>    
</template>
<script> 
 import { Picker } from 'mint-ui';
 import Data from '@/js/LareaData.js'
export default {
  name: 'distpicker',
  components:{
	Picker
  },
  data () {
    return {
    	provs:Data.provs_data(),
    	citys:Data.citys_data(),
    	dists:Data.dists_data(),
    	provsID:'',
    	citysID:'',
    	distsID:'',
       slots:[
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'left'
        },
        {
          divider: true,
          content: '-',
          className: 'slot2'
        },
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        },
      ]
    }
  },
  mounted(){
	  console.log(this.citys)
	  
	  
	  
  },
  methods:{
	 onValuesChange(picker, values) {
 	 if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
     } 
    }
  }
}
</script>
<style scoped>


</style>
